<template>
  <div class="event-list-page">
    <!-- 固定头部区域 -->
    <div class="fixed-header">
      <!-- 搜索栏 -->
      <div class="search-section">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入事件名称搜索"
        prefix-icon="el-icon-search"
        clearable
        @input="handleSearch"
      >
        <el-button 
          slot="append" 
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
      </el-input>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #409EFF 0%, #3A8EE6 100%);">
          <i class="el-icon-document"></i>
        </div>
        <div class="stat-label">搜索结果</div>
        <div class="stat-count">{{ filteredEvents.length }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #E6A23C 0%, #D6941E 100%);">
          <i class="el-icon-loading"></i>
        </div>
        <div class="stat-label">处置中</div>
        <div class="stat-count">{{ processingCount }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #67C23A 0%, #5DAF2C 100%);">
          <i class="el-icon-circle-check"></i>
        </div>
        <div class="stat-label">已控制</div>
        <div class="stat-count">{{ controlledCount }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #F56C6C 0%, #E85A5A 100%);">
          <i class="el-icon-circle-close"></i>
        </div>
        <div class="stat-label">已结束</div>
        <div class="stat-count">{{ completedCount }}</div>
      </div>
    </div>
    </div>

    <!-- 事件列表 (可滚动区域) -->
    <div class="event-list-container" @scroll="handleScroll" ref="listContainer">
      <div class="event-list">
      <div 
        v-for="event in displayedEvents" 
        :key="event.eventId"
        class="event-card"
        @click="viewEventDetail(event)"
      >
        <div class="card-header">
          <div class="event-level-badge" :class="getLevelClass(event.eventType)">
            {{ event.eventType }}
          </div>
          <el-tag 
            :type="getStatusType(event.status)" 
            size="small"
            class="status-tag"
          >
            {{ event.status }}
          </el-tag>
        </div>

        <div class="card-title">
          <i class="el-icon-warning-outline"></i>
          {{ event.eventName }}
        </div>

        <div class="card-content">
          <div class="info-row">
            <i class="el-icon-time"></i>
            <span class="info-label">发生时间：</span>
            <span class="info-value">{{ event.eventTime }}</span>
          </div>
          <div class="info-row">
            <i class="el-icon-location"></i>
            <span class="info-label">发生地点：</span>
            <span class="info-value">{{ event.location }}</span>
          </div>
          <div class="info-row">
            <i class="el-icon-map-location"></i>
            <span class="info-label">影响范围：</span>
            <span class="info-value">{{ event.affectedArea }}</span>
          </div>
          <div class="info-row">
            <i class="el-icon-user"></i>
            <span class="info-label">负责人员：</span>
            <span class="info-value">{{ event.responsiblePerson }}</span>
          </div>
        </div>

        <div class="card-footer">
          <div class="event-id">编号：{{ event.eventId }}</div>
          <div class="view-detail">
            <span>查看详情</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredEvents.length === 0" class="empty-state">
        <i class="el-icon-document-delete"></i>
        <p class="empty-text">未找到相关事件</p>
        <p class="empty-tip">请尝试其他搜索条件</p>
      </div>

      <!-- 加载更多提示 -->
      <div v-if="filteredEvents.length > 0" class="load-more-wrapper">
        <div v-if="loadingMore" class="loading-more">
          <i class="el-icon-loading"></i>
          <span>正在加载...</span>
        </div>
        <div v-else-if="allLoaded" class="all-loaded">
          <div class="loaded-line"></div>
          <span>数据已经加载完了</span>
          <div class="loaded-line"></div>
        </div>
      </div>
      </div>
    </div>

    <!-- 初始加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <i class="el-icon-loading"></i>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script>
import { getQueryResults } from './service';

export default {
  name: 'EventList',

  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      
      // 所有事件数据
      allEvents: [],
      
      // 筛选的事件等级
      selectedLevel: 'all',
      
      // 事件等级选项
      eventLevels: [
        { label: '全部', value: 'all', type: '' },
        { label: '特别重大', value: '特别重大', type: 'danger' },
        { label: '重大', value: '重大', type: 'danger' },
        { label: '较大', value: '较大', type: 'warning' },
        { label: '一般', value: '一般', type: 'info' }
      ],
      
      // 加载状态
      loading: false,
      loadingMore: false,
      
      // 分页相关
      pageSize: 5, // 每页显示数量
      currentPage: 1, // 当前页码
      allLoaded: false // 是否全部加载完成
    };
  },

  computed: {
    // 过滤后的事件列表（全部数据）
    filteredEvents() {
      let events = this.allEvents;

      // 按事件等级筛选
      if (this.selectedLevel !== 'all') {
        events = events.filter(e => e.eventType === this.selectedLevel);
      }

      // 按关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        events = events.filter(e => 
          e.eventName.toLowerCase().includes(keyword) ||
          e.eventId.toLowerCase().includes(keyword) ||
          e.location.toLowerCase().includes(keyword) ||
          e.responsiblePerson.toLowerCase().includes(keyword)
        );
      }

      return events;
    },

    // 显示的事件列表（分页后的数据）
    displayedEvents() {
      return this.filteredEvents.slice(0, this.currentPage * this.pageSize);
    },

    // 处置中数量
    processingCount() {
      return this.allEvents.filter(e => e.status === '处置中').length;
    },

    // 已控制数量
    controlledCount() {
      return this.allEvents.filter(e => e.status === '已控制').length;
    },

    // 已结束数量
    completedCount() {
      return this.allEvents.filter(e => e.status === '已结束').length;
    }
  },

  methods: {
    // 搜索处理
    handleSearch() {
      // 重置分页
      this.currentPage = 1;
      this.allLoaded = false;
      
      if (this.searchKeyword) {
        this.$message({
          message: `搜索：${this.searchKeyword}`,
          type: 'info',
          duration: 1500
        });
      }
    },

    // 滚动事件处理
    handleScroll(event) {
      const container = event.target;
      const scrollTop = container.scrollTop;
      const scrollHeight = container.scrollHeight;
      const clientHeight = container.clientHeight;

      // 距离底部50px时触发加载
      if (scrollHeight - scrollTop - clientHeight < 50) {
        this.loadMore();
      }
    },

    // 加载更多
    loadMore() {
      // 如果正在加载或已全部加载，则不再加载
      if (this.loadingMore || this.allLoaded) {
        return;
      }

      // 检查是否还有更多数据
      const totalPages = Math.ceil(this.filteredEvents.length / this.pageSize);
      if (this.currentPage >= totalPages) {
        this.allLoaded = true;
        return;
      }

      // 开始加载
      this.loadingMore = true;

      // 模拟延迟1秒加载
      setTimeout(() => {
        this.currentPage++;
        this.loadingMore = false;

        // 检查是否已加载完所有数据
        if (this.currentPage >= totalPages) {
          this.allLoaded = true;
        }
      }, 1000);
    },

    // 获取等级样式类
    getLevelClass(level) {
      const classMap = {
        '特别重大': 'level-critical',
        '重大': 'level-major',
        '较大': 'level-moderate',
        '一般': 'level-minor'
      };
      return classMap[level] || 'level-minor';
    },

    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '处置中': 'warning',
        '已控制': 'success',
        '待处理': 'info',
        '已结束': ''
      };
      return typeMap[status] || 'info';
    },

    // 查看事件详情
    viewEventDetail(event) {
      this.$emit('view-detail', event);
    },

    // 加载事件列表
    loadEvents() {
      this.loading = true;
      
      getQueryResults().then(data => {
        this.allEvents = data;
        this.loading = false;
        
        // 初始化分页状态
        this.currentPage = 1;
        this.allLoaded = false;
        
        // 检查初始数据是否少于一页
        if (data.length <= this.pageSize) {
          this.allLoaded = true;
        }
      }).catch(error => {
        this.loading = false;
        this.$message({
          message: error.message || '加载失败',
          type: 'error'
        });
      });
    }
  },

  watch: {
    // 监听筛选条件变化，重置分页
    filteredEvents() {
      this.currentPage = 1;
      this.allLoaded = this.filteredEvents.length <= this.pageSize;
      
      // 滚动到顶部
      if (this.$refs.listContainer) {
        this.$refs.listContainer.scrollTop = 0;
      }
    }
  },

  mounted() {
    this.loadEvents();
  }
};
</script>

<style scoped>
.event-list-page {
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 固定头部区域 */
.fixed-header {
  flex-shrink: 0;
  background: #f5f5f5;
  z-index: 10;
}

/* 搜索栏 */
.search-section {
  background: white;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.search-section >>> .el-input__inner {
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}

.search-section >>> .el-input-group__append {
  background: #409EFF;
  border-color: #409EFF;
  color: white;
  padding: 0 15px;
}

.search-section >>> .el-input-group__append:hover {
  background: #66b1ff;
}

.search-section >>> .el-button {
  color: white;
  font-weight: 500;
}

/* 筛选标签 */
.filter-section {
  background: white;
  padding: 12px 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-label {
  font-size: 13px;
  color: #666;
  margin-right: 10px;
  white-space: nowrap;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.filter-tag {
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  user-select: none;
}

.filter-tag:active {
  transform: scale(0.95);
}

/* 统计信息 */
.stats-section {
  background: white;
  padding: 20px 15px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.stat-item:active {
  transform: scale(0.95);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}

.stat-item:hover .stat-icon {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.stat-icon i {
  font-size: 22px;
  color: white;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.stat-count {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

/* 事件列表容器 (可滚动) */
.event-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #f5f5f5;
}

/* 事件列表 */
.event-list {
  padding: 0 10px 20px;
}

.event-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.event-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.event-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.event-level-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.level-critical {
  background: linear-gradient(135deg, #f5222d 0%, #cf1322 100%);
}

.level-major {
  background: linear-gradient(135deg, #fa541c 0%, #d4380d 100%);
}

.level-moderate {
  background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
}

.level-minor {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}

.status-tag {
  font-size: 12px;
}

/* 卡片标题 */
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  line-height: 1.4;
}

.card-title i {
  font-size: 18px;
  color: #fa8c16;
  margin-right: 6px;
  flex-shrink: 0;
}

/* 卡片内容 */
.card-content {
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 13px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row > i {
  font-size: 14px;
  color: #909399;
  margin-right: 6px;
  margin-top: 2px;
  flex-shrink: 0;
}

.info-label {
  color: #666;
  margin-right: 4px;
  white-space: nowrap;
}

.info-value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.event-id {
  font-size: 12px;
  color: #999;
  font-family: 'Courier New', monospace;
}

.view-detail {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #409EFF;
  font-weight: 500;
}

.view-detail span {
  margin-right: 4px;
}

.view-detail i {
  font-size: 14px;
  transition: transform 0.3s;
}

.event-card:hover .view-detail i {
  transform: translateX(3px);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  margin-top: 20px;
}

.empty-state i {
  font-size: 80px;
  color: #c0c4cc;
  margin-bottom: 15px;
}

.empty-text {
  font-size: 16px;
  color: #606266;
  margin: 0 0 8px 0;
}

.empty-tip {
  font-size: 13px;
  color: #909399;
  margin: 0;
}

/* 加载更多提示 */
.load-more-wrapper {
  padding: 20px 0;
  text-align: center;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409EFF;
  font-size: 14px;
  padding: 15px;
}

.loading-more i {
  font-size: 18px;
  margin-right: 8px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.all-loaded {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  padding: 15px;
  gap: 10px;
}

.loaded-line {
  width: 40px;
  height: 1px;
  background: #e0e0e0;
}

/* 初始加载状态 */
.loading-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  z-index: 1000;
}

.loading-overlay i {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 10px;
}

.loading-overlay p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 15px 10px;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
  }

  .stat-icon i {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  .stat-count {
    font-size: 16px;
  }
}

/* 小屏幕优化 */
@media (max-width: 400px) {
  .stats-section {
    gap: 8px;
    padding: 12px 8px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }

  .stat-icon i {
    font-size: 18px;
  }

  .stat-label {
    font-size: 10px;
    margin-bottom: 3px;
  }

  .stat-count {
    font-size: 15px;
  }
}
</style>

